<template>
  <view style="background-color: blue;position: relative;">
    <view style="height: 100px;background-color: yellow;">站位,默认情况下，webview 会遮盖住这里，全屏显示</view>
    <view style="width: 100%;height: 200px;background-color: red;overflow: hidden;">
      <!-- 默认情况下，web-view 是占据整个屏幕的，他本身跳出了uni里的组件层级，是安卓原生的组件 -->
      <web-view src="https://www.baidu.com" :webview-styles="styles"></web-view>
    </view>
  </view>
</template>

<script>
  
  export default {
    data() {
      return {
        styles: {
          // width: '100px',
          // height: '100px'
          left: '10px',
          right: '10px',
          top: '100px',
          bottom: '100px'
        }
      }
    },
    onReady() {
    		// // #ifdef APP-PLUS
    		
        
      //   setTimeout(() => {
      //     var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
      //     console.log('currentWebview', currentWebview);
      //     var windowInfo = uni.getWindowInfo()
      //     const {windowWidth, windowHeight} = windowInfo
      //     const wv = currentWebview.children()[0]
      //     console.log('wv', wv);
      //     // wv.setStyle({top: 100, bottom: 100, left: 50, right: 50})
      //     // wv.setStyle({top: 100, height:windowHeight/2, left: 10, right: 10})
      //     wv.setStyle({top: 100, bottom: 100, left: 10, right: 10})
      //   }, 1000); //如果是页面初始化调用时，需要延时一下
    		// // #endif
    	}
  }
</script>

<style>
</style>